<template>
  <div id="setpwd">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>基本信息</span>
          </div>
          <el-form :rules="rules1" style="width: 100%;" ref="form1" :model="form1" label-width="60px">
            <el-form-item prop="username" label="账号">
              <el-input disabled prefix-icon="el-icon-search" v-model="form1.username" size="small"
                placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="nickname" label="昵称">
              <el-input prefix-icon="el-icon-search" v-model="form1.nickname" size="small" placeholder="昵称"></el-input>
            </el-form-item>
            <el-form-item prop="autograph" label="个签">
              <el-input type="textarea" prefix-icon="el-icon-search" v-model="form1.autograph" size="small"
                placeholder="个性签名"></el-input>
            </el-form-item>
            <el-form-item style="text-align: right;">
              <el-button type="info" @click="cz1">重置</el-button>
              <el-button type="primary" style="margin-left: 30px;" @click="tj1">提交</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>修改密码</span>
          </div>
          <el-form :rules="rules2" style="width: 100%;" ref="form2" :model="form2" label-width="80px">
            <el-form-item prop="oldpwd" label="原密码">
              <el-input prefix-icon="el-icon-search" v-model="form2.oldpwd" size="small" placeholder="原密码"></el-input>
            </el-form-item>
            <el-form-item prop="newpwd" label="新密码">
              <el-input prefix-icon="el-icon-search" v-model="form2.newpwd" size="small" placeholder="新密码"></el-input>
            </el-form-item>
            <el-form-item prop="repeatpwd" label="确认密码">
              <el-input prefix-icon="el-icon-search" v-model="form2.repeatpwd" size="small" placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item style="text-align: right;">
              <el-button type="info" @click="cz2">重置</el-button>
              <el-button type="primary" style="margin-left: 30px;" @click="tj2">提交</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getUserInfo, setUserInfo, setAdminPwd } from '@/api/index'
export default {
  name: 'setpwd',
  data() {
    return {
      form1: {
        username: '',
        nickname: '',
        autograph: '',
      },
      rules1: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
      },
      form2: {
        oldpwd: '123456',
        newpwd: '123456',
        repeatpwd: '123456',
      },
      rules2: {
        oldpwd: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
        ],
        newpwd: [
          { required: true, message: '请输入新密码', trigger: 'blur' }
        ],
        repeatpwd: [
          { required: true, message: '请输入再输一次', trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      getUserInfo({ user_id: 0 }).then(res => {
        this.form1 = res.data.data
      })
    },
    cz1() {
      this.$refs.form1.resetFields();
      this.getUserInfo()
    },
    cz2() {
      this.$refs.form2.resetFields();
    },
    tj1() {
      setUserInfo(this.form1).then((res) => {
        if (res.data.status) {
          this.$message.success('成功')
        } else {
          this.$message.error('失败')
        }
      })
    },
    tj2() {
      setAdminPwd(this.form2).then((res) => {
        if (res.data.status) {
          this.$message.success('成功')
        } else {
          this.$message.error('失败')
        }
      })
    },
  }
}
</script>

<style lang="less" scoped></style>